<template>
  <div class="">
    <!-- 头部组件 -->
    <AppHeader
      @cover="cover"
      :isShow="isShow"
      @isBtnChange="isBtnChange"
    ></AppHeader>
    <!-- 列表 -->
    <AppList :obj="obj"></AppList>
    <!-- 底部 -->
    <br /><br />
    <br /><br />
    <footer>
      <p>
        <input
          v-model="checkAllChange"
          @click="checkAll"
          type="checkbox"
          name=""
          id=""
        />
        全选
      </p>
      <p>总价：{{ total }} 元</p>
      <p v-if="isShow">去支付：{{ nn }}</p>
      <p v-else @click="removeCheck">删除选中({{ num }})</p>
    </footer>
    <transition name="fade">
      <div v-if="flag" class="cover">
        <h2>关键字搜索</h2>
        <ul>
          <li
            @click="borChange(v, i)"
            :class="{ active: borShow == i }"
            v-for="(v, i) in arr"
            :key="i"
          >
            {{ v }}
          </li>
        </ul>
        <div class="btnBox">
          <button @click="flag = false">取消</button>
          <button @click="filterValue">确定</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import AppHeader from "../components/app-header.vue";
import axios from "axios";
import { ref, watch, reactive, toRefs ,computed} from "vue";
import AppList from "../components/app-list.vue";
export default {
  setup() {
    let obj = ref([]); // 总数据
    let num = ref([]); // 总数
    let total = ref([]); // 总价格

    let isShow = ref(true); // 显示是否删除

    let flag = ref(false); //  弹框

    let borShow = ref(-1); // 弹框里的边框激活

    let locArr = ref([]); // 备份筛选数据
    let keywords = ref(); // 备份搜索关键字

    let shopNum = reactive({
      nn: computed(() => {
        let nums = 0;
        obj.value.forEach((item) => {
          if (item.checked) {
            nums += item.num;
          }
        });
        return nums;
      }),
    });

    let arr = ref(["海信", "海尔", "海信", "美的"]);

    let checkAllChange = ref(false); // 全选状态
    // 全选
    function checkAll(e) {
      obj.value.forEach((item) => {
        item.checked = e.target.checked;
      });
    }
    function filterValue() {
      // 筛选数据按钮
      obj.value = locArr.value.filter((item) =>
        item.name.includes(keywords.value)
      );
    }

    // 弹框选中
    function borChange(v, i) {
      if (borShow.value == i) {
        borShow.value = -1;
        keywords.value = "";
      } else {
        borShow.value = i;
      }
      console.log(v);

      keywords.value = v;
    }
    axios.get("data.json").then((res) => {
      console.log(res.data.cartData);
      obj.value = res.data.cartData;
      locArr.value = res.data.cartData;
    });
    console.log(obj.value);

    watch(
      () => obj.value,
      (data) => {
        console.log(obj.value);

        total.value = obj.value.reduce(
          (nu, item) => (nu += item.checked && item.price * item.num),
          0
        );

        // num.value = obj.value.reduce(
        //   (nu, item) => (nu += item.checked && item.num),
        //   0
        // );

        let flag = obj.value.every((item) => {
          return item.checked;
        });
        if (flag && obj.value.length != 0) {
          // 假设有长度 肯定要 true
          checkAllChange.value = true;
        } else {
          checkAllChange.value = false;
        }
      },
      { deep: true, immediate: true }
    );

    // 改变删除 显示的按钮
    function isBtnChange() {
      isShow.value = !isShow.value;
    }

    // 输出选中
    function removeCheck() {
      obj.value = obj.value.filter((item) => !item.checked);
    }

    function cover() {
      flag.value = !flag.value;
    }
    return {
      obj,
      total,
      num,
      isShow,
      isBtnChange,
      removeCheck,
      cover,
      flag,
      arr,
      borShow,
      borChange,
      locArr,
      keywords,
      filterValue,
      checkAll,
      checkAllChange,
      ...toRefs(shopNum),
    };
  },
  components: { AppList, AppHeader },
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter-form, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(100%);
}

.btnBox {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: space-around;
  button {
    width: 80px;
    height: 35px;
    border-radius: 5px;
    &:nth-child(1) {
      background-color: #fff;
      outline: none;
      border: 0;
    }
    &:nth-child(2) {
      background-color: rgb(71, 226, 33);
      outline: none;
      border: 0;
    }
  }
}

.active {
  border: 2px solid red !important;
}
.cover {
  width: 60%;
  height: 100%;
  background-color: rgb(187, 185, 185);
  position: fixed;
  right: 0;
  top: 0;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    li {
      border: 2px solid #000;
      padding: 2px 20px;
      margin: 10px;
      font-size: 15px;
    }
  }
}
footer {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: red;
  display: flex;
  font-size: 18px !important;
  align-items: center;
  justify-content: space-around;
  color: #fff;
}
</style>
